<template>
  <div class='yzm-wrap'>
    <div class="yzm-wrap-bg">
      <main-bg></main-bg>
    </div>
    <div class="yzm-wrap-con">
      <div class="top">
        <div class="back" @click="$router.back(-1)"></div>
        <div class="service" @click="toService"></div>
      </div>
      <div class="content">
        <p class="tit">请输入验证码</p>
        <p class="tel">验证码已发送至+{{$route.query.tel}}</p>
        <div class="box">
          <input type="number" oninput="if(value.length > 6)value = value.slice(0,6)" v-model="yzm" placeholder="输入验证码">
          <div class="reset" @click="countDown">{{content}}</div>
          <div class="del" @click="delBtn" v-show="yzm"></div>
        </div>
        <div class="nnext" v-show="yzm.length != 6">确定</div>
        <div class="next" v-show="yzm.length == 6" @click="loginBtn">确定</div>
      </div>
      <div class="shadow" v-show="showDown">
        <div class="shadow-wrap">
          <p>温馨提示</p>
          <p class="tit">该手机号已注册，请前往应用商店下载【I you】</p>
          <div class="go-btn" @click="btnAction">下载APP</div>
        </div>
      </div>
      <div class="shadow" v-show="showSucc">
        <div class="shadow-wrap">
          <p>注册成功！</p>
          <p class="wel">欢迎加入I you</p>
          <div class="go-btn" @click="btnAction">立即下载</div>
        </div>
      </div>
      <div class="shadow" v-show="showImg">
        <div class="shadow-wrap">
          <div class="close" @click="showImg = false"></div>
            <input type="text" placeholder="请输入图形验证码"
            v-model="imgYzm" oninput="if(value.length > 4)value = value.slice(0,4)">
            <img class="imgYzm"
            :src="imgYzmUrl"
            alt="图形验证码" @click="changeUrl">
          <div :class="imgYzm.length == 4?'img-btn img-btn-sure':'img-btn'" @click="imgLogin">确定</div>
        </div>
      </div>
    </div>
    

  </div>
</template>

<script>
  import {
    invitationLoginYZM,
    getVPhone,
    customerService,
    findBestIyouApk
  } from '@/request/api';
  import {
    Toast
  } from 'mint-ui';
  import mainBg from './bg';
  export default {
    data() {
      return {
        yzm: '',
        imgYzm: '',
        randomNum: '',
        showSucc: false,
        showDown: false,
        showImg: false,
        content: '重新发送',
        totalTime: 60,
        timer: '',
        href:'',
        canClick: true, //添加canClick
        imgYzmUrl:'',
        timerFun:null,
        downUrl:'',
      };
    },
    components:{
      mainBg
    },
    methods: {
      getDownUrl(){
        findBestIyouApk().then(v=>{
          this.downUrl = v.data.data.downloadurl
        })
      },
      btnAction() {
        let ua = navigator.userAgent.toLowerCase();
        //ios终端
        let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //ios
          window.location = 'https://apps.apple.com/cn/app/iyou-%E9%AB%98%E5%88%86%E7%8E%A9%E5%AE%B6%E7%A4%BE%E4%BA%A4%E5%9C%88/id1506873053'
        } else {
          //android
          window.location = this.downUrl
        }
      },
      countDown() {
        this.changeUrl();
        this.showImg = true;
      },
      setIntervalFun(){
        if (!this.canClick) return false;
        this.canClick = false;
        this.content = this.totalTime + 's';
        this.showImg = false;
        this.timerFun =  window.setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's'
          if (this.totalTime < 0) {
            window.clearInterval(this.timerFun)
            this.content = '重新发送'
            this.totalTime = 60
            this.canClick = true //这里重新开启
          }
        }, 1000)
      },
      setImgYzm(callback){
        getVPhone({
            mobileNo: this.$route.query.tel,
            types: 7,
            imgYzm: this.imgYzm,
            areaCode: 86,
            channel: 'web'
        }).then(res => {
            if (res.data.code == 200) {
              callback()
            } else {
              Toast(res.data.message);
            }
        })
      },
      getCustomerService() {
        customerService().then(res => {
          this.href = res.data.data.url;
        })
      },
      toService() {
        window.location.href= this.href;
      },
      changeUrl() {
        this.imgYzm = '';
        this.imgYzmUrl = this.keyUrl+'/base/getStaticCode?mobileNo='+this.$route.query.tel+'&rnd='+Math.random()
      },
      delBtn() {
        this.yzm = '';
      },
      getTime() {
        var _this = this;
        let yy = new Date().getFullYear();
        let mm =
          (new Date().getMonth() + 1) < 10 ?
          "0" + (new Date().getMonth() + 1) :
          (new Date().getMonth() + 1);
        let dd =
          new Date().getDate() < 10 ?
          "0" + new Date().getDate() :
          new Date().getDate();
        let hh =
          new Date().getHours() < 10 ?
          "0" + new Date().getHours() :
          new Date().getHours();
        let ff =
          new Date().getMinutes() < 10 ?
          "0" + new Date().getMinutes() :
          new Date().getMinutes();
        let ss =
          new Date().getSeconds() < 10 ?
          "0" + new Date().getSeconds() :
          new Date().getSeconds();
        _this.timer = yy + mm + dd + hh + ff + ss;
      },
      loginBtn() {
        invitationLoginYZM({
          mobileNo: this.$route.query.tel,
          code: this.yzm,
          userId: this.$route.query.userid,
          appVersion: 'web',
          osName: 'web',
          channel: 'web',
          deviceName: 'web',
          deviceId: 'web',
          reqTime: this.timer
        }).then(res => {
          console.log(res.data.data.isRegister)
          if (res.data.code == 200) {
            clearInterval(this.timerFun);
            this.totalTime = 60;
            this.content = '重新发送';
            this.canClick = true;
            if(res.data.data.isRegister == 0) {
              this.showSucc = true;
            } else {
              this.showDown = true;
            }
          }  else {
            Toast(res.data.message);
          }
        })
      },
      imgLogin() {
        if (this.imgYzm.length <4) {
          Toast('请输入正确的图形验证码');
          return false;
        }
        this.showImg = false;
        this.setImgYzm(this.setIntervalFun)
      }
    },
    created() {
      this.getCustomerService();
      this.setIntervalFun();
      setInterval(this.getTime, 1000);
      this.getDownUrl();
    },

  };

</script>

<style lang='scss' scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .yzm-wrap {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg.png') no-repeat;
    background-size: cover;
    position: relative;
    &-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 2;
    }
    &-con{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 4;
    }
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .back {
        width: 44px;
        height: 44px;
        background: url('../assets/images/back.png') no-repeat;
        background-size: cover;
        margin: 64px 0 0 34px;
      }

      .service {
        width: 44px;
        height: 44px;
        background: url('../assets/images/service.png') no-repeat;
        background-size: cover;
        margin: 64px 34px 0 0;
      }
    }

    .content {
      width: 550px;
      margin: auto;

      .tit {
        font-size: 46px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        padding: 52px 0 0 0;
      }

      .tel {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 40 px;
        padding-bottom: 80px;
      }

      .box {
        position: relative;

        input {
          outline: none;
          border: 0;
          width: 100%;
          /* height: 100px; */
          background:none;
          border-radius: 6px;
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fff;
          line-height: 40px;
          padding: 30px 0;
          text-indent: 40px;
          border-bottom: 1px rgba(255,255,255,0.5) solid;
          border-radius: 0;
        }

        .reset {
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(239, 71, 105, 1);
          border-left: 1px solid rgba(255,255,255,.8);
          padding-left: 40px;
          position: absolute;
          top: 30px;
          right: 40px;
        }

        .del {
          width: 44px;
          height: 44px;
          background: url('../assets/images/icon_txt_delet.png') no-repeat;
          background-size: cover;
          position: absolute;
          top: 28px;
          left: 264px;
        }
      }

      .nnext {
        width: 550px;
        height: 90px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 45px;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        color: rgba(0,0, 0,0.5);
        line-height: 90px;
        text-align: center;
        margin-top: 80px;
      }

      .next {
        width: 550px;
        height: 90px;
         background: rgba(255, 255, 255,1);
        border-radius: 45px;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        color: rgba(0, 0, 0, 1);
        line-height: 90px;
        text-align: center;
        margin-top: 80px;

      }

    }

    .shadow {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);

      .shadow-wrap {
        width: 590px;
        height: 320px;
        background: rgba(255, 255, 255, 1);
        border-radius: 20px;
        position: relative;
        top: 512px;
        left: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        p:nth-of-type(1) {
          font-size: 32px;
          font-family: PingFangSC-Semibold, PingFang SC;

          color: rgba(51, 51, 51, 1);
        }

        .tit {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          width: 446px;
        }

        .wel {
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }

        .go-btn {
          width: 210px;
          height: 78px;
          background:#111;
          border-radius: 40px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          color: rgba(255, 255, 255, 1);
          line-height: 78px;
          text-align: center;
        }

        .close {
          width: 44px;
          height: 44px;
          background: url('../assets/images/close.png') center no-repeat;
          background-size:80% auto;
          position: absolute;
          top: 10px;
          right:10px;
        }

        input {
          border: 0;
          width: 460px;
          height: 98px;
          background: rgba(247, 245, 250, 1);
          border-radius: 6px;
          border: 1px solid rgba(191, 187, 201, 1);
          text-indent: 30px;
          color: #000;
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin: 40px auto 0;
          border-radius: 0;
        }

        .imgYzm {
          width: 140px;
          height: 68px;
          position: absolute;
          top: 80px;
          left: 354px;
        }

      }

    }
    .img-btn {
      width: 210px;
      height: 78px;
      background:rgba(0,0,0,0.4);
      border-radius: 40px;
      line-height: 78px;
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      &-sure{
        background:rgba(0,0,0,1);
        color: rgba(255, 255, 255,1);
      }
    }
  }

</style>
